<template>
  <div class="not-found-page">
    <div class="stars"></div>
    <div class="twinkling"></div>
    <div class="clouds"></div>
    
    <div class="container">
      <div class="astronaut">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
          <circle cx="256" cy="256" r="256" fill="#FFD93B"/>
          <path d="M256 80c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176S353.2 80 256 80zm0 320c-79.5 0-144-64.5-144-144S176.5 112 256 112s144 64.5 144 144-64.5 144-144 144z" fill="#333"/>
          <circle cx="200" cy="180" r="36" fill="#333"/>
          <circle cx="312" cy="180" r="36" fill="#333"/>
          <path d="M256 304c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64z" fill="#FF6B6B"/>
          <path d="M256 240c-8.8 0-16-7.2-16-16s7.2-16 16-16 16 7.2 16 16-7.2 16-16 16z" fill="#333"/>
        </svg>
      </div>
      
      <div class="content">
        <h1 class="glitch" data-text="404">404</h1>
        <h2>页面迷失在太空</h2>
        <p class="subtext">
          您寻找的页面可能已被移除、更名或暂时不可用。
          <br>
          让我们一起返回安全地带。
        </p>
        
        <div class="buttons">
          <router-link to="/" class="btn home-btn">
            <span>返回地球</span>
            <svg width="13px" height="10px" viewBox="0 0 13 10">
              <path d="M1,5 L11,5"></path>
              <polyline points="8 1 12 5 8 9"></polyline>
            </svg>
          </router-link>
          
          <button @click="goBack" class="btn back-btn">
            <span>返回上一站</span>
            <svg width="13px" height="10px" viewBox="0 0 13 10">
              <path d="M1,5 L11,5"></path>
              <polyline points="5 1 1 5 5 9"></polyline>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const goBack = () => {
  router.go(-1)
}
</script>

<style scoped>
/* 基础样式 */
.not-found-page {
  position: relative;
  height: 100vh;
  width: 100%;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  overflow: hidden;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1200px;
  padding: 2rem;
}

.content {
  max-width: 500px;
  margin-left: 2rem;
}

/* 宇航员SVG */
.astronaut svg {
  width: 300px;
  height: auto;
  animation: float 6s ease-in-out infinite;
}

/* 文字样式 */
h1 {
  font-size: 8rem;
  font-weight: 700;
  margin: 0;
  line-height: 1;
  position: relative;
}

.glitch {
  position: relative;
  color: #fff;
}

.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  color: #0ff;
  z-index: -1;
  animation: glitch-effect 3s infinite;
}

.glitch::after {
  color: #f0f;
  z-index: -2;
  animation: glitch-effect 2s infinite reverse;
}

h2 {
  font-size: 2.5rem;
  margin: 1rem 0;
  color: #e94560;
}

.subtext {
  font-size: 1.1rem;
  line-height: 1.6;
  opacity: 0.8;
  margin-bottom: 2rem;
}

/* 按钮样式 */
.buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn svg {
  margin-left: 10px;
  transition: transform 0.3s ease;
}

.btn:hover svg {
  transform: translateX(5px);
}

.home-btn {
  background: linear-gradient(45deg, #e94560, #ff6b6b);
  color: white;
  box-shadow: 0 4px 15px rgba(233, 69, 96, 0.3);
}

.home-btn:hover {
  box-shadow: 0 6px 20px rgba(233, 69, 96, 0.4);
  transform: translateY(-2px);
}

.back-btn {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

/* 动画效果 */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}

@keyframes glitch-effect {
  0% { transform: translate(0); }
  20% { transform: translate(-5px, 5px); }
  40% { transform: translate(-5px, -5px); }
  60% { transform: translate(5px, 5px); }
  80% { transform: translate(5px, -5px); }
  100% { transform: translate(0); }
}

/* 纯CSS星空背景 */
.stars, .twinkling, .clouds {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.stars {
  background: #000;
  z-index: 0;
}

.stars::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(1px 1px at 10% 20%, white 1%, transparent 1%),
    radial-gradient(1px 1px at 20% 30%, white 1%, transparent 1%),
    radial-gradient(1px 1px at 30% 40%, white 1%, transparent 1%),
    radial-gradient(1px 1px at 40% 50%, white 1%, transparent 1%),
    radial-gradient(1px 1px at 50% 60%, white 1%, transparent 1%),
    radial-gradient(1px 1px at 60% 70%, white 1%, transparent 1%),
    radial-gradient(1px 1px at 70% 80%, white 1%, transparent 1%),
    radial-gradient(1px 1px at 80% 90%, white 1%, transparent 1%);
  background-size: 200px 200px;
  animation: twinkle 200s linear infinite;
}

/* 闪烁星星效果 */
.twinkling {
  z-index: 1;
}

.twinkling::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(1px 1px at 15% 25%, white 1%, transparent 1%),
    radial-gradient(1px 1px at 25% 35%, white 1%, transparent 1%),
    radial-gradient(1px 1px at 35% 45%, white 1%, transparent 1%),
    radial-gradient(1px 1px at 45% 55%, white 1%, transparent 1%),
    radial-gradient(1px 1px at 55% 65%, white 1%, transparent 1%),
    radial-gradient(1px 1px at 65% 75%, white 1%, transparent 1%),
    radial-gradient(1px 1px at 75% 85%, white 1%, transparent 1%),
    radial-gradient(1px 1px at 85% 95%, white 1%, transparent 1%);
  background-size: 200px 200px;
  opacity: 0;
  animation: twinkle-opacity 5s ease-in-out infinite alternate;
}

/* 云层效果 */
.clouds {
  z-index: 2;
  opacity: 0.4;
}

.clouds::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(50px 20px at 10% 20%, rgba(255,255,255,0.7) 1%, transparent 1%),
    radial-gradient(80px 30px at 30% 40%, rgba(255,255,255,0.7) 1%, transparent 1%),
    radial-gradient(60px 25px at 70% 30%, rgba(255,255,255,0.7) 1%, transparent 1%),
    radial-gradient(100px 40px at 90% 60%, rgba(255,255,255,0.7) 1%, transparent 1%);
  animation: clouds-move 100s linear infinite;
}

/* 动画定义 */
@keyframes twinkle {
  from { background-position: 0 0; }
  to { background-position: -10000px 5000px; }
}

@keyframes twinkle-opacity {
  0% { opacity: 0; }
  50% { opacity: 0.8; }
  100% { opacity: 0; }
}

@keyframes clouds-move {
  from { background-position: 0 0; }
  to { background-position: 10000px 0; }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
    text-align: center;
  }
  
  .content {
    margin-left: 0;
    margin-top: 2rem;
  }
  
  h1 {
    font-size: 5rem;
  }
  
  h2 {
    font-size: 2rem;
  }
  
  .astronaut svg {
    width: 200px;
  }
  
  .buttons {
    justify-content: center;
  }
}
</style>